<template>
  <div>
    <el-row>
      <!-- 左侧 -->
      <el-col :span="24">
        <el-descriptions title="基本信息" border>
          <!-- 基本信息 -->
          <el-descriptions-item label="申请时间" span="2">{{ formatYearMonthDay(info.createTime) }} </el-descriptions-item>
          <el-descriptions-item label="申请人" span="2">{{ info.shenqingname }}</el-descriptions-item>

          <!-- 这里要获取事件状态 -->
          <!-- 用户名称(申请\审核人) -->
          <!-- <el-descriptions-item label="申请状态" span="1">
            <el-tag v-if="info.sta==0" type="warning">审核</el-tag>
            <el-tag v-if="info.sta==1" type="success">通过</el-tag>
            <el-tag v-if="info.sta==3" type="danger">拒绝</el-tag>
            <el-tag v-if="info.sta==4" type="info">撤销</el-tag>
          </el-descriptions-item> -->

          <!-- 差异信息 -->
          <el-descriptions-item label="会议主题" span="6">{{ info.topic }} </el-descriptions-item>
          <el-descriptions-item label="会议内容" span="6">{{ info.content }} </el-descriptions-item>
          <el-descriptions-item label="会议日期" span="6">{{ getFormatedTimeStr(info.meetingDate,'MM月DD日') }} </el-descriptions-item>
          <el-descriptions-item label="开始时间" span="6">{{ info.startTime }} </el-descriptions-item>
          <el-descriptions-item label="结束时间" span="6">{{ info.endTime }} </el-descriptions-item>
          <el-descriptions-item label="地点" span="6">{{ info.place }} </el-descriptions-item>
          <el-descriptions-item label="主持" span="6">{{ info.host }} </el-descriptions-item>
          <el-descriptions-item label="形式" span="6">{{ info.xingshi }} </el-descriptions-item>

          <el-descriptions-item label="参会人员" span="6">
            <i v-for="(item,index) in info.attenders" :key="index">{{ item.name }}、</i>
          </el-descriptions-item>

          <!-- 相关文件 -->
          <el-descriptions-item label="附件" span="6">
            <p v-for="(item,index) in info.attaches " :key="index" style="">
              <el-link :href="item.path" type="primary" target="_blank">{{ item.name }}</el-link>
            </p>
          </el-descriptions-item>
          <!-- <el-descriptions-item label="图片" span="6">
			      <el-image style="width: 64px; height: 64px" :src=" info.pics[0]" :preview-src-list=" info.pics" /><br>
			      <i>共<b style="color: red;">{{ info.pics.length}}</b>张图片,点击图片查看更多</i>
			    </el-descriptions-item> -->

        </el-descriptions>
      </el-col>

      <!-- 右侧 -->
      <!-- <el-col :span="10" :offset="1">
        <el-row>
          <el-col :span="24">
            <div style="  font-size: 16px;font-weight: 700;color: black;padding: 0px 0px 20px 0px;">审核进度</b></div>
          </el-col>
        </el-row>
        <el-row v-for="(item,index) in auditors" :key="index" style="line-height: 32px;">

          <el-col :span="6">
            <div class="col-8 col-null"><b>审批人：<span style="color: royalblue;">{{ item.name }}</span></b></div>
          </el-col>
          <el-col :span="6">
            <div class="col-8 col-null"><b>
              <el-tag v-if="item.sta==3" type="info">> {{ getTaskStaStr(item.sta) }}</el-tag>
              <el-tag v-if="item.sta==1" type="success"> {{ getTaskStaStr(item.sta) }}</el-tag>
              <el-tag v-if="item.sta==0" type="warning"> {{ getTaskStaStr(item.sta) }}</el-tag>
              <el-tag v-if="item.sta==2" type="danger"> {{ getTaskStaStr(item.sta) }}</el-tag>
            </b>
            </div>
          </el-col>
          <el-col :span="6">
            <div v-if="item.sta==0" class="col-8 col-null">-</div>
            <div v-if="item.sta>0" class="col-8 col-null">{{ formatYearMonthDay(item.ts) }}</div>
          </el-col>

          <el-col :span="6">
            <div v-if="item.sta==0" class="col-8 col-null">-</div>
            <div v-if="item.sta>0" class="col-img col-null">
              <el-image style="width: 96px; height: 48px" :src=" info.pics[0]" fit="fill" />
            </div>
          </el-col>
          <el-col :span="24">
            <div v-if="item.msg != null" class="col-24"><i>建议：</i>{{ item.msg }}</div>
          </el-col>
        </el-row>
      </el-col> -->
    </el-row>

    <!-- {{auditors}} -->

    <!-- <el-descriptions title="用户信息" border>
      <el-descriptions-item v-for="(item,index,id) in info" :label="index" span="6">{{item}} </el-descriptions-item>
    </el-descriptions> -->

  </div>
</template>

<script>
import {
  websock
} from '@/websock'
import moment from 'moment'

export default {
	  // 组件名称
  name: 'HuiyiTongzhiDetail',
  props: {
    id: Number
  },
  data() {
    return {
      info: {},
      staStr: '',
      auditors: []

    }
  },
  watch: {
    id(d1, d2) {
      console.log(d1, d2)

      this.info = {}
      if (d1 === 0) return
      // 这里要改
      websock.huiyiTongzhiDetail({
        id: d1
      }).then(data => {
        this.info = data
        websock.getUserInfoByUid({
          uid: this.info.uid
        }).then(data => {
          console.log('get user info by uid', this.info.uid, data)
          this.info.shenqingname = data.name
          console.log('this info', this.info)
          this.$forceUpdate()
        })
        this.auditors = []
        for (const key in this.info.auditors) {
          this.auditors.push(this.info.auditors[key])

          websock.getUserInfoByUid({
            uid: this.info.auditors[key].uid
          }).then(data => {
            this.info.auditors[key].name = data.name
            this.info.auditors[key].signimg = data.signimg
            this.$forceUpdate()
          })
        }
      })
    }
  },
  async mounted() {
    console.log('created id')
    websock.huiyiTongzhiDetail({
      id: this.id
    }).then(data => {
      this.info = data
      websock.getUserInfoByUid({
        uid: this.info.uid
      }).then(data => {
        console.log('get user info by uid', this.info.uid, data)
        this.info.shenqingname = data.name
        console.log('this info', this.info)
        this.$forceUpdate()
      })
      this.auditors = []
      for (const key in this.info.auditors) {
        this.auditors.push(this.info.auditors[key])

        websock.getUserInfoByUid({
          uid: this.info.auditors[key].uid
        }).then(data => {
          this.info.auditors[key].name = data.name
          this.info.auditors[key].signimg = data.signimg
          this.$forceUpdate()
        })
      }
    })
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取格式化时间字符串
    getFormatedTimeStr(stamp, str = 'MM-DD HH:mm') {
    	return moment(stamp).format(str)
    },
    fetchData() {

    },

    formatYearMonthDay(src) {
      return moment(src).format('YYYY-MM-DD')
    },
    getEventStaStr(sta) {
      if (sta === 1) {
        return '待审核'
      } else if (sta === 2) {
        return '通过'
      } else if (sta === 3) {
        return '拒绝'
      } else if (sta === 4) {
        return '撤销'
      }
    },
    getTaskStaStr(sta) {
      if (sta === 0) {
        return '未批示'
      } else if (sta === 1) {
        return '同意'
      } else if (sta === 2) {
        return '拒绝'
      } else if (sta === 3) {
        return '已撤回'
      }
    },
    onPageSizeChange(val) {
      this.pageCount = val
      this.fetchData()
    },
    onCurrentPageChange(val) {
      this.pageIndex = val
      this.fetchData()
    }
  }
}
</script>

<style>
@import url("../../styles/detail.css");
</style>
